<template>
    <div class="drawer_all">
<!--        <a-affix :offset-top="500" :target="window" :style="{ position: 'absolute', top: 500, right: 50}">-->
            <div class="drawer_button">
                <button type="button" class="button" @click="drawer = !drawer">show</button>
            </div>
<!--        </a-affix>-->

<!--        <div id="drawer_body">-->
            <el-drawer
                class="drawer_body"
                ref="drawer_body"
                title="菜单"
                :visible.sync="drawer"
                direction="rtl"
                size="10%">
                <el-row>
                    <el-button circle type="primary" @click="sendToIndex('/showPic')">所有图片</el-button>
                </el-row>
                <el-row>
                    <el-button circle type="primary" @click="sendToIndex('/feedback')">反馈问题</el-button>
                </el-row>
            </el-drawer>
<!--        </div>-->
    </div>
</template>

<script>

export default {
    name: "Drawer",
    data() {
        return {
            drawer: false,
        }
    },
    methods: {
        sendToIndex(path) {
            this.$emit("sendToIndex", path);
            this.$refs.drawer_body.closeDrawer();
        }
    }
}
</script>

<style scoped>

.drawer_button {
    position: fixed;
    right: 5px;
    top: 50%;
    z-index: 999;
}

.button {
    cursor: pointer;
    position: relative;
    font-size: 0;
    width: 50px;
    height: 50px;
    text-align: center;
    margin-right: 10px;
    border-radius: 50%;
    border: none;
    box-shadow: 0 2px 5px rgba(0, 0, 0, .4);
    background: -webkit-linear-gradient(top, #fff, #d5dbe1);
    background: -moz-linear-gradient(top, #fff, #d5dbe1);
    background: -ms-linear-gradient(top, #fff, #d5dbe1);
    background: -o-linear-gradient(top, #fff, #d5dbe1);
    /*linear-gradient(top, #fff, #d5dbe1);*/
    -webkit-transition: all .13s ease-out;
    -moz-transition: all .13s ease-out;
    -o-transition: all .13s ease-out;
    transition: all .13s ease-out;
}

.button:after {
    display: inline-block;
    font-family: serif;
    font-size: 1px;
    color: #bdc0c1;
    /*content: attr(data-icon);*/
    speak: none;
    font-weight: normal;
    -webkit-font-smoothing: antialiased;
    width: 32px;
    line-height: 32px;
    margin: 5px;
    border-radius: 32px;
    border: 1px solid #efefef;
    box-shadow: -1px 0 0 #dbdcdd, 1px 0 0 #dbdcdd, 0 1px 0 #d0d1d2, 0 0 8px #fff;
    background: -webkit-linear-gradient(top left, #fcfcfc 50%, #dfe4e8);
    content: "SHOW";
}

.button:hover:after {
    color: #19a6e4;
    box-shadow: 0 1px 3px #d7d8d9 inset;
    background: -webkit-radial-gradient(#dbeef8, #f2f4f6 50%);
}

.button:hover {
    top: 3px;
    box-shadow: 0 2px 5px #8043b6 inset;
}


.drawer_body {
    /*padding: 20px;*/
}

/* 使用深度选择器解决抽屉样式不生效问题 */
/deep/ .el-drawer__header > span {
    font-size: 35px;
    font-weight: bolder;
    font-family: 'huyou', serif;
}

/deep/ .el-drawer__body {
    padding: 20px 20px 250px;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly
}

/deep/ .el-drawer__body > .el-row {
    /*margin-top: 30px;*/
    text-align: center;
}

/deep/ .el-drawer__body > .el-row > button {
    width: 80px;
    height: 80px;
}

</style>
